<template>
  <div class="contain">
    <!-- 查询列表 -->
    <FormDataz @add="add" @handleQuery="handleQuery" @resetQuery="resetQuery"></FormDataz>

    <!-- 数据渲染列表 -->
    <div>
      <el-table
        :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        stripe
        ref="multipleTable"
        tooltip-effect="dark"
        height="300"
      >
        <el-table-column prop="id" label="编号" width="180"> </el-table-column>
        <el-table-column prop="name" label="办案单位" width="180"> </el-table-column>
        <el-table-column prop="address" label="办案单位地址"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span @click="dialogTableVisible = true">
              <el-button size="mini" @click="handleEdit(scope.row)">详情</el-button>
            </span>
            <el-button size="mini" @click="remove(scope.row.id)">删除</el-button>
            <span @click="dialogFormVisible = true">
              <el-button size="mini" @click="edit(scope.row)">修改</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
    <!-- 详情 -->
    <el-dialog title="详细信息" :visible.sync="dialogTableVisible" width="80%">
      <el-table :data="gridData">
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="name" label="办案单位"> </el-table-column>
        <el-table-column prop="address" label="办案单位图片"> </el-table-column>
        <el-table-column label="办案单位图片" align="center" prop="img_url">
          <template slot-scope="scope">
            <image-preview :src="scope.row.img_url || ''" :width="50" :height="50"></image-preview>
          </template>
        </el-table-column>
        <el-table-column prop="create_by" label="办案单位图片"> </el-table-column>
        <el-table-column prop="create_time" label="创建时间"> </el-table-column>
        <el-table-column prop="update_by" label="更新者"> </el-table-column>
        <el-table-column prop="update_time" label="更新时间"> </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改" :visible.sync="dialogFormVisible" :show-close="false">
      <el-form :data="gridData" class="demo-form-inline">
        <el-row :gutter="120">
          <el-col :span="10"
            ><div class="grid-content bg-purple">
              <el-form-item label="办案单位编号">
                <el-input v-model="gridData.id" disabled></el-input>
              </el-form-item>
              <el-form-item label="办案单位名称">
                <el-input v-model="gridData.name"></el-input>
              </el-form-item>
              <el-form-item label="办案单位地址">
                <el-input v-model="gridData.address"></el-input>
              </el-form-item>
              <el-form-item label="更新者">
                <el-input v-model="gridData.update_by"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="14"
            ><div class="grid-content bg-purple">
              <el-form-item label="">
                <span>办案单位图片</span>
                <image-upload v-model="gridData.img_url" />
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listUnit, addUnit, delUnit, updateUnit } from '@/api/system/unit.js'
// 查询组件
import FormDataz from '@/components/FormDataz/unit'
export default {
  components: { FormDataz },
  data() {
    return {
      // 分页
      currentIndex: '',
      currentPage: 1, //初始页
      pagesize: 5, //    每页的数据

      isFlag: true,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      dialogVi: false,
      // 详情
      dialogTableVisible: false,
      // 修改
      dialogFormVisible: false,
      // 显示列表
      tableData: [
        {
          id: '', // 办案单位
          name: '', // 办案单位名称
          address: '' // 办案单位地址
        }
      ],
      // 列表
      gridData: []
    }
  },
  methods: {
    // 查询办案单位列表
    listUnit() {
      listUnit().then((data) => {
        this.tableData = data.rows
      })
    },
    // 详情
    handleEdit(row) {
      this.gridData = []
      this.gridData.push(row)
    },
    // 新增
    add(value) {
      if (value.name == null || value.address == null) {
        return this.$message.error('内容不能为空')
      } else {
        this.$modal.confirm('是否提交该内容').then(() => {
          addUnit(value).then(() => {
            this.$modal.msgSuccess('添加成功')
            this.listUnit()
            this.resetQuery()
          })
        })
      }
    },
    // 搜索
    handleQuery(value) {
      listUnit(value).then((data) => {
        this.tableData = data.rows
        // this.resetQuery()
      })
    },
    // 删除
    remove(id) {
      this.$modal
        .confirm('是否删除该内容')
        .then(() => {
          delUnit(id).then(() => {
            this.$modal.msgSuccess('删除成功')
            this.listUnit()
          })
        })
        .catch(() => {})
    },
    // 修改
    edit(row) {
      this.gridData = row
    },
    // 提交修改
    submitForm: function () {
      this.$modal.confirm('确定修改该内容吗？').then(() => {
        updateUnit(this.gridData).then(() => {
          this.$modal.msgSuccess('修改成功')
          this.dialogFormVisible = false
        })
      })
    },
    // 弹框取消按钮
    cancel: function () {
      this.dialogFormVisible = false
    },
    // 分页
    handleSizeChange: function (size) {
      this.pagesize = size
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },

    // 清空
    resetQuery() {
    }
  },
  mounted() {
    this.listUnit()
  }
}
</script>

<style lang="scss" scoped>
.contain {
  margin: 10px;
}
</style>
